<template>
    <div>
        <div class="el-form" v-if="obj.type==='read'">
            <Resume  v-model:value="obj.data"></Resume>
        </div>
        <el-form ref="form" v-if="obj.type==='edit'" :model="obj.data" label-width="110px">
            <el-form-item label="姓名" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.mobile" clearable autocomplete="off" maxlength="11" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="obj.data.sex">
                    <el-radio v-for="x in globalData.sexAry" :key="x" :label="x.value">{{x.text}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生年月" prop="birthday" :rules="[formRulesMixin.notNull]">
                <DatePicker v-model:value="obj.data.birthday" />
            </el-form-item>
            <el-form-item label="民族" prop="nation" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.nation" placeholder="民族" class="search_select" clearable>
                    <el-option v-for="(item,index) in globalData.nationList" :key="index" :label="item.text" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="个人优势" :autosize="{minRows: 10}" prop="specialty" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.specialty" type="textarea" autocomplete="off" maxlength="300" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="最高学历" prop="edu" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.edu" placeholder="最高学历" class="search_select" clearable>
                    <el-option v-for="(item,index) in globalData.eduList" :key="index" :label="item.text" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.school" clearable autocomplete="off" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="major" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.major" clearable autocomplete="off" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="薪资要求" prop="salary" :rules="[formRulesMixin.notNull]">
                <el-input class="defalut-input" v-model="obj.data.salary" clearable />　月薪（元）0表示面议
            </el-form-item>
            <el-form-item label="参加工作时间" prop="workyear" :rules="[formRulesMixin.notNull]">
                <DatePicker v-model:value="obj.data.workyear" />
            </el-form-item>
            <el-form-item label="求职期望" class="el-form-item-label">
                <div>
                    <div class="itemdiv" v-for="(x,i) in obj.data.objective" :key="i">
                        <div class="item">
                            <span class="left">求职类型</span>
                            <el-select v-model="x.type" placeholder="求职类型">
                                <el-option v-for="(item,index) in globalData.jobTypeList" :key="index" :label="item.text" :value="item.value" />
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="left">期望职位</span>
                            <el-input v-model="x.job" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">职位偏好</span>
                            <el-input v-model="x.preference" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">期望行业</span>
                            <el-select v-model="x.industry" placeholder="期望行业" >
                                <el-option v-for="(item,index) in globalData.industryList" :key="index" :label="item.text" :value="item.value" />
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="left">薪资要求</span>
                            <el-input v-model="x.salary" class="defalut-input" style="margin-right: 10px;" /> 元
                        </div>
                        <div class="item">
                            <span class="btn clear" @click="del_objective(i)">删除本段求职期望</span>
                            <span class="btn sub" @click="add_objective">添加求职期望</span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="工作经历" class="el-form-item-label">
                <div>
                    <div class="itemdiv" v-for="(x,i) in obj.data.works" :key="i">
                        <div class="item">
                            <span class="left">公司名称</span>
                            <el-input v-model="x.companyname" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">所在行业</span>
                            <el-select v-model="x.industry" placeholder="所在行业" >
                                <el-option v-for="(item,index) in globalData.industryList" :key="index" :label="item.text" :value="item.value" />
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="left">在职时间</span>
                            <DateRange v-model:start="x.start" v-model:end="x.end" />
                        </div>
                        <div class="item">
                            <span class="left">职位名称</span>
                            <el-input v-model="x.jobname" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">工作内容</span>
                            <el-input v-model="x.jobdetail" type="textarea" autocomplete="off" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div class="item">
                            <span class="left">拥有技能</span>
                            <el-input v-model="x.skill" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">工作业绩</span>
                            <el-input v-model="x.achievement" type="textarea" autocomplete="off" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div class="item">
                            <span class="btn clear" @click="del_works(i)">删除本段工作经历</span>
                            <span class="btn sub" @click="add_works">添加工作经历</span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="项目经历" class="el-form-item-label">
                <div>
                    <div class="itemdiv" v-for="(x,i) in obj.data.projects" :key="i">
                        <div class="item">
                            <span class="left">项目名称</span>
                            <el-input v-model="x.name" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">担任角色</span>
                            <el-input v-model="x.role" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">项目时间</span>
                            <DateRange v-model:start="x.start" v-model:end="x.end" />
                        </div>
                        <div class="item">
                            <span class="left">项目描述</span>
                            <el-input v-model="x.msg" type="textarea" autocomplete="off" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div class="item">
                            <span class="left">项目业绩</span>
                            <el-input v-model="x.achievement" type="textarea" autocomplete="off" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div class="item">
                            <span class="btn clear" @click="del_projects(i)">删除本段项目经历</span>
                            <span class="btn sub" @click="add_projects">添加项目经历</span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="教育经历" class="el-form-item-label">
                <div>
                    <div class="itemdiv" v-for="(x,i) in obj.data.edus" :key="i">
                        <div class="item">
                            <span class="left">学校</span>
                            <el-input v-model="x.school" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">学历</span>
                            <el-select v-model="x.edu" placeholder="学历" >
                                <el-option v-for="(item,index) in globalData.eduList" :key="index" :label="item.text" :value="item.value" />
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="left">专业</span>
                            <el-input v-model="x.major" autocomplete="off"></el-input>
                        </div>
                        <div class="item">
                            <span class="left">时间段</span>
                            <DateRange v-model:start="x.start" v-model:end="x.end" />
                        </div>
                        <div class="item">
                            <span class="left">在校经历</span>
                            <el-input v-model="x.experience" type="textarea" autocomplete="off" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div class="item">
                            <span class="btn clear" @click="del_edus(i)">删除本段教育经历</span>
                            <span class="btn sub" @click="add_edus">添加教育经历</span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item class="dialog-btns-item">
                <div class="dialog-btns">
                    <span class="btn clear" @click="$emit('close')">取消</span>
                    <span class="btn sub ml10" @click.prevent="upData" v-if="obj.data.m_addtype=='3' && obj.data.me=='1'">提交</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    import Editer from "@/components/editer.vue"
    import DatePicker from '@/components/date_picker.vue'
    import DateRange from '@/components/date_range.vue'
    import Resume from '@/components/resume1.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        data:{
            id: inject("id").value || 0,
            name: "",
            mobile: "",
            sex:"1",
            birthday:"",
            nation: "",
            edu:"",
            school:"",
            major:"",
            salary:0,
            workyear:"",
            specialty:"",
            objective:[{ type:0,job:"",preference:"",industry:0,salary:0 }],
            works:[{ companyname:"",industry:[],start:"",end:"",jobname:"",jobdetail:"",skill:"",achievement:"" }],
            projects:[{ name:"",role:"",start:"",end:"",msg:"",achievement:"" }],
            edus:[{ school:"",edu:"",major:"",start:"",end:"",experience:"" }],
            m_addtype:"3",
            me:"1", //允许添加
        },
        type: inject("type").value ||'edit',
    })
    let del_objective = i => {
        if(obj.data.objective.length>1){
            obj.data.objective.splice(i,1)
        }
    }
    let add_objective = () => {
        obj.data.objective.push({ type:0,job:"",preference:"",industry:0,salary:0 })
    }
    let del_works = i => {
        if(obj.data.works.length>1){
            obj.data.works.splice(i,1)
        }
    }
    let add_works = () => {
        obj.data.works.push({companyname:"",industry:[],start:"",end:"",jobname:"",jobdetail:"",skill:"",achievement:""})
    }
    let del_projects = i => {
        if(obj.data.projects.length>1){
            obj.data.projects.splice(i,1)
        }
    }
    let add_projects = () => {
        obj.data.projects.push({name:"",role:"",start:"",end:"",msg:"",achievement:""})
    }
    let del_edus = i => {
        if(obj.data.edus.length>1){
            obj.data.edus.splice(i,1)
        }
    }
    let add_edus = () => {
        obj.data.edus.push({school:"",edu:0,major:"",start:"",end:"",experience:""})
    }

    let init = async () => {
        if(obj.data.id > 0){
            proxy.$ajax({
                url: 'persion/get',
                data: obj.data,
                bfLoading: true
            }).then(d => {
                if(d.success){
                    obj.data = {...obj.data, ...d.msg}
                    obj.data.salary = parseInt(obj.data.salary||0)
                    obj.data.nation = parseInt(obj.data.nation)
                    obj.data.edu = parseInt(obj.data.edu)
                    obj.data.edus = obj.data.edus&&obj.data.edus.length?obj.data.edus:[{ school:"",edu:"",major:"",start:"",end:"",experience:"" }]
                    obj.data.objective = obj.data.objective&&obj.data.objective.length?obj.data.objective:[{ type:0,job:"",preference:"",industry:0,salary:0 }]
                    obj.data.works = obj.data.works&&obj.data.works.length?obj.data.works:[{ companyname:"",industry:[],start:"",end:"",jobname:"",jobdetail:"",skill:"",achievement:"" }]
                    obj.data.projects = obj.data.projects&&obj.data.projects.length?obj.data.projects:[{ name:"",role:"",start:"",end:"",msg:"",achievement:"" }]
                }else{
                    proxy.elMessageMixin(d.err, 'error')
                }
            }).catch(() => { })
        }
    }
    init()
    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: 'persion/design',
                    data: obj.data,
                    bfLoading: true,
                    // timeout:60000
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin(`${obj.data.id>0?'修改':"添加"}成功`, 'success')
                        proxy.$emit('init')
                        proxy.$emit('close')
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(e => { console.log(e) })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
    .itemdiv { clear: both; }
    .itemdiv::after { content: ''; display: block; clear: both; }
    .item { display: flex; width: 100%; padding: 5px 0; justify-content: left; }
    .item .left { min-width: 80px; }
</style>